<!DOCTYPE html>
<html ng-app="App">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>科目</title>

    <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/angular.min.js" type="text/javascript"></script>
    <script src="js/laydate/laydate.js" type="text/javascript"></script>
    <script src="js/bootstrapValidator.min.js" type="text/javascript"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        a,
        .pagination>li>a {
            color: #1abc9c;
        }
        
        .col-md-4 {
            padding-right: 0px;
        }
        
        .help-block {
            display: inline-block;
            margin: 0px;
        }
    </style>
</head>

<body ng-controller="Aaa">
    <div class="container-fluid" style="padding:20px 30px;">

        <!-- 数据展示 -->
        <div class="row" ng-show='mainshow'>
            <div class="col-md-12">
                <table class="table table-hover table-bordered">
                    <thead>
                        <tr>
                            <th width="10%">编号</th>
                            <th>学科名称</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in Subject track by $index">
                            <td>{{$index+1}}</td>
                            <td>{{item.Title}}</td>
                            <td><a href="javascript:;" ng-click="update(item)">修改</a>&nbsp; &nbsp;|&nbsp;&nbsp;<a class="a-post" href="javascript:;" ng-click="delete(item)" data-toggle="modal" data-target="#myModal">删除</a></td>
                        </tr>
                        <tr>
                            <td><button type="button" class="btn btn-primary" ng-click="add()">添加课程</button></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">删除</h4>
                        </div>
                        <div class="modal-body">确认删除"{{deleterealname}}"这们学科？</div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">否</button>
                            <button type="button" class="btn btn-primary" ng-click="deletereal()" data-dismiss="modal">是</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 修改或添加 -->
        <div class="row" ng-show='updateshow' style="margin-top:20px;margin-bottom:20px;">
            <form name="myForm" id="defaultForm" novalidate>
                <div class="col-md-12">
                    <div class="row" style="margin-bottom: 15px;">
                        <div class="col-md-1">
                            <p style="font-weight: bold;width:100%;height:34px;text-align: right;line-height: 34px;margin:0px;">学科名称 :</p>
                        </div>
                        <div class="col-md-4 form-group">
                            <input type="text" name="Title" class="form-control" placeholder="请输入科目名" ng-model="oneData.Title">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-1">
                            <p style="font-weight: bold;width:100%;height:34px;text-align: right;line-height: 34px;margin:0px;"> </p>
                        </div>
                        <button class="btn btn-primary ajax-post " ng-click="save()">保存</button>
                        <button class="btn btn-default active" ng-click="backmain()">返回</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="modal fade" id="ModalOK" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel1">提示</h4>
                    </div>
                    <div class="modal-body">
                        提交成功
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" data-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script type="text/javascript">
        var app = angular.module('App', []);
        app.controller('Aaa', ['$scope', '$http', "$timeout",function($scope, $http, $timeout) {

            $scope.url = "http://localhost/tp5-school/public/";
            $scope.reset = function() {

                $scope.Subject = []; //所有科目
                $scope.oneData = {}; //一条数据
                $scope.mainshow = true; //默认显示主体

                $http({
                    method: "get",
                    url: $scope.url + "subject"
                }).then(function(data) {

                    $scope.teacherInfo = [];
                    $scope.Subject = data.data.data;
                })

            }
            $scope.reset();


            $scope.detailshow = false;
            $scope.updateshow = false;
            //添加
            $scope.add = function() {
                $scope.mainshow = false; //默认显示主体
                $scope.updateshow = true;
                $scope.oneData = {};
            }

            //保存
            $scope.save = function() {
         
                var url = $scope.url + "subject";
                var method = "post";
                if ($scope.oneData.Id) {
                    url = $scope.url + "subject/" + $scope.oneData.Id;
                    method = "put";
                }

                $.ajax({
                    method: method,
                    url: url,
                    data: $scope.oneData,
                    dataType: "json",
                    success: function(data) {
					console.log(data);
                        $('#ModalOK').modal('show');
                        $timeout(function() {
                            $('#ModalOK').modal('hide');
                        }, 1500);
						$scope.backmain();
						$scope.reset();
                    }
                })
            }

            //修改
            $scope.update = function(item) {
                $scope.oneData = item
                $scope.mainshow = false; //默认显示主体
                $scope.updateshow = true;

            }

            $scope.delitem = {}; //删除的数据
            $scope.deleterealname = "";
            //点击删除按钮
            $scope.delete = function(item) {
                $scope.delitem = item;
                $scope.deleterealname = item.Title;
            }

            //点击“是”确认删除
            $scope.deletereal = function() {
                $http({
                    method: "delete",
                    url: $scope.url + "subject/" + $scope.delitem.Id,
                }).then(function(data) {

                    $('#ModalOK').modal('show');
                    $timeout(function() {
                        $('#ModalOK').modal('hide');
                    }, 1500);
                    $scope.reset();

                })

            }

            //所有的返回主界面
            $scope.backmain = function() {
                $scope.mainshow = true; //默认显示主体
                $scope.oneData = {}; //一条数据
                $scope.updateshow = false;
            }

        }]);
        $('#defaultForm').bootstrapValidator({
            excluded: [":disabled"],
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            live: 'enabled',
            fields: { /*验证：规则*/
                Title: { //验证input项：验证规则
                    message: '姓名无效,',

                    validators: {
                        notEmpty: { //非空验证：提示消息
                            message: '用户名不能为空,'
                        },
                        stringLength: {
                            min: 1,
                            max: 10,
                            message: '用户名长度必须在1到10之间,'
                        }
                    }
                }
            }
        }).on('success.form.bv', function(e) {
            console.log(1);
        });
    </script>
</body>

</html>